Page({
  data: {
    ctx: null,
    canvas: null,
    lastX: 0,
    lastY: 0,
  },
  onReady() {
    const $ = wx.createSelectorQuery()
    $.select("#myCanvas").fields({ node: true, size: true })
      .exec(res => {
        let canvas = res[0].node;
        let ctx = canvas.getContext("2d");
        this.setData({
          ctx,
          canvas
        })
      })
  },
  touchStart(e) {
    this.data.lastX = e.changedTouches[0].x;
    this.data.lastY = e.changedTouches[0].y;
  },
  touchMove(e) {
    //鼠标移动
    this.data.ctx.moveTo(this.data.lastX, this.data.lastY)
    let moveX = e.changedTouches[0].x;
    let moveY = e.changedTouches[0].y;
    this.data.ctx.beginPath()
    this.data.ctx.moveTo(this.data.lastX, this.data.lastY)
    this.data.ctx.lineTo(moveX, moveY)
    this.data.ctx.stroke()
    this.data.lastX = moveX
    this.data.lastY = moveY
  },
  touchEnd(e) {
    // console.log(e)
  },
  clear() {
    this.data.ctx.clearRect(0, 0, 750, 300)
  },
  save() {
    let result = this.data.canvas.toDataURL()
    console.log(result)
  }
})